<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="context-path" content="${pageContext.request.contextPath}">
    <title>后台管理系统 - 轮播图管理</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/admin.css">
    <style>
        body {
            padding-top: 56px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .sidebar {
            min-height: calc(100vh - 56px);
            position: fixed;
            top: 56px;
            left: 0;
            width: 200px;
            z-index: 100;
            padding: 20px 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #343a40;
        }
        .sidebar .nav-link {
            color: #ddd;
            padding: 0.5rem 1rem;
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.1);
        }
        .sidebar .nav-link.active {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .sidebar .nav-link i {
            margin-right: 8px;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
            flex: 1;
        }
        .banner-image-wrapper {
            width: 150px;
            max-width: 150px;
        }
        .banner-image-wrapper img {
            max-width: 100px;
            max-height: 50px;
            object-fit: contain;
        }
        .table-actions {
            min-width: 200px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/admin">
            <i class="fas fa-dumbbell"></i> 体育商城后台管理
        </a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-user-shield"></i> 管理员
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/" target="_blank">
                        <i class="fas fa-store"></i> 访问商城
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="${pageContext.request.contextPath}/admin/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp" />

    <!-- 主要内容 -->
    <div class="main-content">
        <div class="container-fluid">
            <!-- 标题行 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h2 class="mb-1">轮播图管理</h2>
                    <p class="text-muted">管理首页轮播图</p>
                </div>
                <div class="col-md-6 text-right">
                    <a href="${pageContext.request.contextPath}/admin/banner/add" class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加轮播图
                    </a>
                </div>
            </div>
            
            <!-- 轮播图列表 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>标题</th>
                                            <th>图片</th>
                                            <th>链接</th>
                                            <th>排序</th>
                                            <th>状态</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:if test="${empty banners.records}">
                                            <tr>
                                                <td colspan="8" class="text-center">暂无轮播图数据</td>
                                            </tr>
                                        </c:if>
                                        <c:forEach items="${banners.records}" var="banner">
                                            <tr>
                                                <td>${banner.id}</td>
                                                <td>${banner.title}</td>
                                                <td class="banner-image-wrapper">
                                                    <img src="${pageContext.request.contextPath}${banner.imageUrl}" alt="${banner.title}">
                                                </td>
                                                <td>${banner.linkUrl}</td>
                                                <td>${banner.sortOrder}</td>
                                                <td>
                                                    <c:choose>
                                                        <c:when test="${banner.status == 1}">
                                                            <span class="badge badge-success">启用</span>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <span class="badge badge-danger">禁用</span>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                                <td><fmt:formatDate value="${banner.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
                                                <td class="table-actions">
                                                    <a href="${pageContext.request.contextPath}/admin/banner/edit/${banner.id}" class="btn btn-sm btn-outline-primary">编辑</a>
                                                    <button type="button" class="btn btn-sm btn-outline-danger delete-btn" data-id="${banner.id}">删除</button>
                                                    <c:choose>
                                                        <c:when test="${banner.status == 1}">
                                                            <button type="button" class="btn btn-sm btn-outline-warning status-btn" data-id="${banner.id}" data-status="0">禁用</button>
                                                        </c:when>
                                                        <c:otherwise>
                                                            <button type="button" class="btn btn-sm btn-outline-success status-btn" data-id="${banner.id}" data-status="1">启用</button>
                                                        </c:otherwise>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <c:if test="${not empty banners.records}">
                            <nav aria-label="Page navigation">
                                <ul class="pagination justify-content-center">
                                    <c:if test="${banners.current > 1}">
                                        <li class="page-item">
                                            <a class="page-link" href="${pageContext.request.contextPath}/admin/banner/list?pageNum=${banners.current - 1}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    
                                    <c:forEach begin="1" end="${banners.pages}" var="i">
                                        <li class="page-item ${i == banners.current ? 'active' : ''}">
                                            <a class="page-link" href="${pageContext.request.contextPath}/admin/banner/list?pageNum=${i}">${i}</a>
                                        </li>
                                    </c:forEach>
                                    
                                    <c:if test="${banners.current < banners.pages}">
                                        <li class="page-item">
                                            <a class="page-link" href="${pageContext.request.contextPath}/admin/banner/list?pageNum=${banners.current + 1}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                </ul>
                            </nav>
                            </c:if>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/admin/banner.js"></script>
</body>
</html> 